<template>
  <Layout class="h-full">
    <LayoutSider
      theme="light"
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
    >
      <div class="logo text-center">vue3+antdVue平台</div>
      <Menu
        :items="items"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        theme="light"
        mode="inline"
        @openChange="onOpenChange"
        @select="onSelect"
      >
      </Menu>
    </LayoutSider>
    <Layout>
      <LayoutHeader style="background: #fff; padding: 0">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </LayoutHeader>
      <LayoutContent
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <RouterView />
      </LayoutContent>
    </Layout>
  </Layout>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import {
  Layout,
  LayoutContent,
  LayoutHeader,
  LayoutSider,
  Menu,
} from 'ant-design-vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import router from '@/router';
import { RoutesMap } from '@/router/routes';
import appStore from '@/store';
const selectedKeys = ref<string[]>([
  sessionStorage.getItem('selectedKeys') || 'dashboard',
]);
const openKeys = ref<string[]>(
  JSON.parse(sessionStorage.getItem('openKeys') || '[]')
);

const collapsed = ref<boolean>(false);
function getItem(route: RoutesMap) {
  const {
    meta: { icon, title: label },
    path: key,
    children,
  } = route;
  const value = {
    key,
    icon: icon,
    label,
  } as any;
  if (children) {
    value.children = children;
  }
  return value;
}
const items = ref<any[]>([]);
const dynamicRoutes = appStore.userStore.routers.find(item => item.path == '/')
  ?.children as RoutesMap[];
function getMenus(dynamicRoutes: any[]) {
  dynamicRoutes.forEach(route => {
    let children;
    if (route.children) {
      children = route.children.map((child: any) => {
        return getItem(child);
      });
    }
    items.value.push(getItem({ ...route, children }));
  });
}
onMounted(() => {
  getMenus(dynamicRoutes);
});

const onOpenChange = (keys: any[]) => {
  const currentKey = keys.length ? [keys[keys.length - 1]] : [];
  openKeys.value = currentKey;
};
const onSelect = ({ key }: any) => {
  router.push(key);
};
watch(
  () => history,
  route => {
    selectedKeys.value = [route.state.current];
    openKeys.value = ['/' + route.state.current.split('/').filter(Boolean)[0]];
  },
  { immediate: true }
);
</script>
<style>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.ant-menu-title-content {
  display: flex;
  align-items: center;
}
.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
  line-height: 32px;
  font-size: 18px;
  font-weight: 700;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>
